<!-- 头部组件 -->
<template>
  <div class="nav_header">
    <div class="nav_header_left">
      <!-- 折叠菜单icon -->
      <div class="fold_icon">
        <el-icon :size="30" class="fold_svg" @click="handleClick">
          <template v-if="isFold">
            <fold />
          </template>
          <template v-else>
            <expand />
          </template>
        </el-icon>
      </div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <nav-breadcrumb :breadcrumbs="breadcrumbs"></nav-breadcrumb>
      </div>
    </div>
    <div class="nav_header_right">
      <nav-avatar></nav-avatar>
    </div>
  </div>
</template>
<script setup lang='ts' >
import { ref, computed, watchEffect } from 'vue'
import { useStore } from '@/store/index';
import { useRoute } from 'vue-router'
import NavBreadcrumb, { IBreadcrumbType } from "@/base-ui/nav-breadcrumb"
import NavAvatar from "@/base-ui/nav-avatar"
const store = useStore()
const emit = defineEmits(['changeFold'])
let isFold = ref<boolean>(false)
let breadcrumbs = ref<IBreadcrumbType[]>([])
const route = useRoute()

watchEffect(() => {
  breadcrumbs.value = []
  route.matched.forEach(item => breadcrumbs.value.push(item as IBreadcrumbType))
})
computed<boolean>({
  get() {
    return store.state.defaultConfig.isFold
  },
  set(val) {
    isFold.value = val
  }
}
)
const handleClick = () => {
  isFold.value = !isFold.value

  emit('changeFold', isFold.value)
  store.dispatch('defaultConfig/isFoldAction', isFold.value)
}







</script>
<style lang='less' scoped>
.nav_header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;


  .nav_header_left {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

::v-deep .el-breadcrumb__inner {
  margin-left: 6px;
  color: aliceblue;
}

.user_info {}
</style>
